<template>
  <div class="progressChart" ref="progressChart">pr</div>
</template>

<script>
import echarts from "echarts";

export default {
  mounted() {
    let myChart = echarts.init(this.$refs.progressChart);
    myChart.setOption({
      xAxis: {
          show:false,
          min:0,
          max:100
      },
      yAxis: {
          show:false,
          type:'category'
      },
      series: [
          {
              type:'bar',
              data:[78],
              color:'cyan',
              //柱状图的宽度,
              barWidth:10,
              color:"yellowgreen",
              //背景颜色
              showBackground:true,
              backgroundStyle:{
                  color:'#eee'
              },
              //文本标签
              label:{
                  show:true,
                  //改变文本内容
                  formatter:'|',
                  //文本标签位置调试
                  position:'right'
              }
          }
      ],
      //布局调试
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
      },
    });
  },
};
</script>

<style>
.progressChart {
  width: 100%;
  height: 100%;
}
</style>